<template>
  <div class="section">
    <el-row :gutter="18">
      <div class="urgent-message">
        <div class="blue-vertical-line"></div>
        <span class="message-text">老人基本信息</span>
      </div>
    </el-row>
    <el-form :model="form" label-width="120px">
      <el-row :gutter="18">
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-input
              v-model="form.name"
              readonly
              placeholder="请选择老人"
              @click.native="dialogTableVisible = true"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="档案号">
            <el-input v-model="form.userNum" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender" readonly>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="18">
        <el-col :span="6">
          <el-form-item label="入住区域">
            <el-input v-model="form.areaNum" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入住房间">
            <el-input v-model="form.roomnum" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="床位号">
            <el-input v-model="form.bedNum" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="18">
        <el-col :span="6">
            <el-form-item label="身份证号">
            <el-input v-model="form.identity" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入院时间">
            <el-date-picker
              v-model="form.inTime"
              type="date"
              placeholder="请选择"
              value-format="yyyy-MM-dd"
              readonly
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出院时间">
            <el-date-picker
              v-model="form.goAwayTime"
              type="date"
              placeholder="请选择"
              value-format="yyyy-MM-dd"
              @change="handleDateChange"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hospital-days">   
        <p :style="{ 'margin-right': '20px' }">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            住院天数: {{ hospitalDays }}
        </p>
    </div>
     



    <el-row :gutter="18">
      <div class="urgent-message">
        <div class="blue-vertical-line"></div>
        <span class="message-text">费用结算</span>
      </div>
    </el-row>

      <el-row :gutter="18">
        <el-col :span="9">
          <el-form-item label="余额:">
            <el-input v-model="form.saveMoney"></el-input>
          </el-form-item>
          <el-form-item label="结算余额:">
            <el-input v-model="form.resultMoney"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="收费:">
            <p>{{ calculatedPayMoney }}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
     <div class="align-right">
      <el-button type="primary" @click="submitForm" :disabled="insufficientBalance">提交</el-button>
    </div>


    <el-dialog title="选择老人" :visible.sync="dialogTableVisible">
      <el-input
        v-model="name"
        placeholder="请输入老人姓名"
        style="width: 200px"
        @input="search"
      ></el-input>
      <el-table :data="tableData" row-key="userNum">
        <el-table-column
          property="userNum"
          label="档案编号"
          width="150px"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="80px"
        ></el-table-column>
        <el-table-column property="gender" label="性别" width="80px">
          <template slot-scope="scope">
            <div v-if="scope.row.gender === 1" style="font-size: 15px">男</div>
            <div v-else>女</div>
          </template>
        </el-table-column>
        <el-table-column
          property="saveMoney"
          label="住院余额"
          width="100px"
        ></el-table-column>
        <el-table-column property="inTime" label="入院时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="choose(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageSize"
        :current-page="pageNum"
        layout="total, sizes, prev, pager, next"
        @next-click="nextPage"
        @prev-click="prevPage"
        @size-change="sizeChange"
        @current-change="currentPage"
        :total="total"
      ></el-pagination>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        saveMoney:"",
        resultMoney:""
      },
      name: "",
      pageNum: 1,
      pageSize: 5,
      total: 0,
      dialogTableVisible: false,
      tableData: [],
      selectedAmount: "",
      orderParam: {
        orderNum: "",
        status: 1,
      },
      saveMoney: {},
      orderNum: "",
      countDownTime: 300,
      interval: null,
      rMoney:"",
      insufficientBalance:false
    };
  },
  methods: {
    handleDateChange() {
    this.form.resultMoney=this.rMoney
    this.$axios.post('api/bed/queryResultMoney',  this.form)
      .then(res => {
        const resultMoneyDiff = res.data.data;
      this.form.resultMoney -= resultMoneyDiff;

      // 如果结算余额小于 0，则提示余额不足并禁用提交按钮
      if (this.form.resultMoney < 0) {
        this.$message.error('余额不足，请充值！');
        // 设置一个标志来表示余额不足
        this.insufficientBalance = true;
      } else {
        // 如果余额充足，则启用提交按钮
        this.insufficientBalance = false;
      }

      })
      .catch(error => {
        console.log(error);
      });
    },
    submitForm() {
        console.log(this.form)
      this.$axios.post("api/user/UserGoAway", this.form).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("退住成功!");
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryUser();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryUser();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryUser();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryUser();
    },
    queryCondition() {
      this.pageNum = 1;
      this.queryUser();
    },
    queryUser() {
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.orderParam;
      this.$axios.post("api/user/queryUser", pageParam).then((res) => {
        if (res.data.code == 200) {
          let pageData = res.data.data;
          this.tableData = pageData.list;
          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;
        } else {
          this.$router.push({ path: "/login" });
        }
      });
    },
    search() {
      if (!this.originalData) {
        this.originalData = [...this.tableData];
      }
      if (this.name) {
        // 使用过滤器搜索匹配老人姓名
        this.tableData = this.originalData.filter((item) =>
          item.name.includes(this.name)
        );
      } else {
        // 如果搜索框为空，则恢复原始数据
        this.tableData = [...this.originalData];
      }
    },
    choose(row) {
      this.form = row;
      this.dialogTableVisible = false;
      this.form.saveMoney = this.form.saveMoney;
      this.form.resultMoney = this.form.resultMoney;
      this.rMoney=this.form.resultMoney
    },

    calculateDays(date1, date2) {
      const diffTime = Math.abs(date2 - date1);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

      if (diffDays < 30) {
        return diffDays + " 天";
      } else if (diffDays < 365) {
        return Math.floor(diffDays / 30) + " 个月";
      } else {
        return Math.floor(diffDays / 365) + " 年";
      }
    },
    displayStatus(statusCode) {
      switch (statusCode) {
        case 1:
          return "在院中";
        case 3:
          return "外出中";
        case 4:
          return "已出院";
      }
    },
  },
  created() {
    this.queryUser();
  },
  computed: {
    calculatedPayMoney() {

      return this.form.saveMoney - this.form.resultMoney;
    },
    formattedCreateTime() {
      if (!this.saveMoney || !this.saveMoney.createTime) return "";
      const date = new Date(this.saveMoney.createTime);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    formatCountDownTime() {
      let minutes = Math.floor(this.countDownTime / 60);
      let seconds = this.countDownTime % 60;
      // 格式化为分:秒的形式
      return `${minutes < 10 ? "0" : ""}${minutes}:${
        seconds < 10 ? "0" : ""
      }${seconds}`;
    },
    hospitalDays() {
      if (this.form.inTime && this.form.goAwayTime) {
        const inDate = new Date(this.form.inTime);
        const outDate = new Date(this.form.goAwayTime);
        const timeDifference = outDate.getTime() - inDate.getTime();
        const daysDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));
        return daysDifference;
      } else {
        return 0;
      }
    }
  },
};
</script>

<style scoped>
.section {
  width: 1200px;
  height: 600px;
  background-color: white;
  margin-left: 20px;
  margin-top: 25px;
}

.section1 {
  width: 350px;
  height: 800px;
  background-color: white;
  margin-left: 50px;
  margin-top: 25px;
}

.offset {
  margin-top: 15px;
  margin-left: 15px;
}

.offset1 {
  margin-top: 15px;
  margin-left: 15px;
}

.offset2 {
  margin-top: 50px;
}

.align-right {
  display: flex;
  justify-content: flex-end;
}

.blue-circle,
.yellow-circle,
.red-circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.blue-circle {
  background-color: blue;
}

.red-circle {
  background-color: red;
}

.line {
  width: 3px;
  /* 改变线的宽度 */
  height: 20px;
  /* 改变线的高度 */
  background-color: rgb(0, 174, 255);
  /* 改变线的颜色 */
  margin-right: 8px;
}

.info {
  display: flex;
  align-items: center;
}
.blue-vertical-line {
  border-left: 3px solid blue; /* 设置竖线宽度和颜色 */
  height: 15px; /* 设置竖线高度，根据你的需要调整 */
  margin-right: 10px; /* 可选：设置竖线右边距，根据你的需要调整 */
}
.urgent-message {
  background-color: #cfe8ff; /* 淡蓝色背景 */
  color: #1890ff; /* 蓝色字体颜色 */
  padding: 10px;
  border: 1px solid #91d5ff; /* 淡蓝色边框 */
  border-radius: 5px;
  display: flex;
  align-items: center;
}
.message-text {
  font-weight: bold; /* 加粗字体 */
}
.text {
  color: rgb(0, 174, 255);
}

</style>